<template>
  <div class="heart">
    <el-breadcrumb separator="">
      <el-breadcrumb-item :to="{ path: '/dataReport' }">数据报表</el-breadcrumb-item>
      <el-breadcrumb-item
      ><a></a></el-breadcrumb-item
    >
    </el-breadcrumb>
    <div class="area">
      <div class="selectItem" style="margin-bottom: 0;">
        <h2>小时数据超标</h2>
        <el-switch
        v-model="total"
        size="large"
        active-text="开启"
        inactive-text="关闭"
        />
      </div>
      <div class="description">开启按因子小时数据判断，超范围时报警</div>
      <h2>免除条件</h2>
      <div class="description">免除条件开启后，达到一定条件将不会报警</div>
      <div class="selectItem">
        <div>
          废水流量&lt;=<el-input-number v-model="water"  style="margin-right: 10px" :disabled="!waterOpen||!total"/>升/秒
        </div>
        <el-switch
        v-model="waterOpen"
        size="large"
        active-text="流量判断"
        :disabled="!total"
        />
      </div>
      <div class="selectItem">
        <div>
          烟气流速&lt;=<el-input-number v-model="gas"  style="margin-right: 10px" :disabled="!gasOpen||!total"/>米/秒
        </div>
        <el-switch
        v-model="gasOpen"
        size="large"
        active-text="流速判断"
        :disabled="!total"
        />
      </div>
      <div class="selectItem" style="margin-bottom: 30px;">
        <div>
          氧气含量&lt;=<el-input-number v-model="oxygen"  style="margin-right: 10px" :disabled="!oxygenOpen||!total"/>%
        </div>
        <el-switch
        v-model="oxygenOpen"
        size="large"
        active-text="折算判断"
        :disabled="!total"
        />
      </div>
      <div class="selectItem" style="margin-bottom: 0;">
        <h2>日数据超标</h2>
        <el-switch
        v-model="total1"
        size="large"
        active-text="开启"
        inactive-text="关闭"
        />
      </div>
      <div class="description">开启按因子日数据判断，超范围时报警</div>
      <h2>免除条件</h2>
      <div class="description">免除条件开启后，达到一定条件将不会报警</div>
      <div class="selectItem">
        <div>
          废水流量&lt;=<el-input-number v-model="waterDay"  style="margin-right: 10px" :disabled="!waterDayOpen||!total1"/>升/秒
        </div>
        <el-switch
        v-model="waterDayOpen"
        size="large"
        active-text="流量判断"
        :disabled="!total1"
        />
      </div>
      <div class="selectItem">
        <div>
          烟气流速&lt;=<el-input-number v-model="gasDay"   style="margin-right: 10px" :disabled="!gasDayOpen||!total1"/>米/秒
        </div>
        <el-switch
        v-model="gasDayOpen"
        size="large"
        active-text="流速判断"
        :disabled="!total1"
        />
      </div>
      <div class="selectItem" style="margin-bottom: 30px;">
        <div>
          氧气含量&lt;=<el-input-number v-model="oxygenDay"  style="margin-right: 10px" :disabled="!oxygenDayOpen||!total1"/>%
        </div>
        <el-switch
        v-model="oxygenDayOpen"
        size="large"
        active-text="流速判断"
        :disabled="!total1"
        />
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, watch, onMounted, reactive,  } from 'vue'
let total = ref()
let total1 = ref()
let waterOpen = ref()
let water = ref()
let gasOpen = ref()
let gas = ref()
let oxygenOpen = ref()
let oxygen = ref()
let waterDayOpen = ref()
let waterDay = ref()
let gasDayOpen = ref()
let gasDay = ref()
let oxygenDayOpen = ref()
let oxygenDay = ref()

</script>
<style>
  .heart{
    width: 95%;
    margin: 20px auto;
  }
  .search{
    margin-top: 50px;
    display: flex;
    justify-content: space-around;
  }
  .pagination{
    margin-top: 40px;
    display: flex;
    justify-content: center;
  }
  .area{
    width: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
  }
  .selectItem{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
  }
  .description{
    font-size: 12px;
    color: gray;
    margin-bottom: 20px;
  }
  h2{
    margin: 0;
    padding: 0;
  }
</style>